<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大灰狼书籍搜索</title>
    <link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel="stylesheet">

    <style>
        /* 自定义样式 */
        body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
        }

        .search-container {
            margin: 20px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .search-box {
            width: 60%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            margin-right: 10px;
        }

        .search-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .search-button:hover {
            background-color: #0056b3;
        }

        h1 {
            text-align: center;
            color: #343a40;
            margin-top: 30px;
        }

        ul {
            padding: 0;
            list-style: none;
            margin-top: 30px;
        }

        li {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin: 15px 0;
            padding: 15px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .book_name {
            font-size: 1.5rem;
            font-weight: bold;
            color: #007bff;
            margin: 10px 0;
            margin-top: 0px;
        }

        .book_name:hover {
            text-decoration: underline;
        }

        .media, .author, .category, .score, .status, .word_number {
            color: #6c757d;
            margin: 5px 0;
        }

        .abstract {
            font-size: 0.9rem;
            color: #495057;
            margin-top: 10px;
            margin-bottom: -5px;
        }

        .book-cover {
            max-width: 155px;
            margin-right: 20px;
            margin-bottom: 15px;
        }

        .book-cover img {
            width: 100%;
            border-radius: 5px;
        }

        .book-details {
            flex-grow: 1;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .search-box {
                width: 80%;
            }

            .search-button {
                width: 30%;
            }

            .book-details {
                padding-left: 10px;
            }

            .book-cover {
                max-width: 120px;
                margin-top: 10px;
            }
        }

        li {
            cursor: pointer;
        }
        
        li:hover {
            background-color: #f0f0f0; /* 鼠标悬停时改变背景颜色 */
        }
    </style>
</head>
<body>

<div class="container">
    <!-- 搜索框 -->
    <div class="search-container">
        <input type="text" id="searchQuery" class="search-box" placeholder="请输入搜索书籍或作者...">
        <button id="searchButton" class="search-button">搜索</button>
    </div>

    <!-- 搜索结果标题 -->
    <h1>搜索：{{ title }}</h1>

    <!-- 书籍列表 -->
    <ul>
        {% for item in items %}
        <li onclick="window.location.href='/online_catalogue?{{ item['url'] }}'">
            <h2 class="book_name">{{ item["book_name"] }}</h2>
            <div class="d-flex">
                <!-- 图片展示 -->
                <div class="book-cover">
                    <img src="{{ item['thumb_url'] }}" alt="书籍封面"/>
                </div>
                <!-- 书籍详细信息 -->
                <div class="book-details">
                    <p class="media">来源：{{ item["media"] }}小说</p>
                    <p class="author">作者：{{ item["author"] }}</p>
                    <p class="category">分类：{{ item["category"] }}</p>
                    <p class="score">评分：{{ item["score"] }}</p>
                    <p class="status">状态：{{ item["status"] }}</p>
                    <p class="word_number">字数：{{ item["word_number"] }}</p>
                </div>
            </div>
            <p class="abstract">{{ item["abstract"] }}</p>
        </li>
        {% endfor %}
    </ul>
</div>

<script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
        document.getElementById("searchButton").addEventListener("click", function(event) {
            // 阻止表单的默认提交
            event.preventDefault();

            // 获取搜索框中的输入值
            const query = document.getElementById("searchQuery").value.trim();

            // 检查是否输入了搜索内容
            if (query === "") {
                alert("请输入搜索内容");
            } else {
                // 跳转到搜索结果页面，并传递搜索参数  在线
                const searchUrl = `online_search?query=${encodeURIComponent(query)}`;
                window.location.href = searchUrl;
            }
        });


</script>
</body>
</html>